<template>
  <div>
    <div ref="dataDiv" style="width: 100%; height: 600px; margin-top: 50px" id="dataDiv"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import metricApi from '@/api/core/metric'

const option = {
  // darkMode: true,
  title: {
    text: '云仓代发覆盖率指标趋势图',
    left: 'right',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'left',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新增数量',
      type: 'line',
      stack: 'Total',
      data: []
    },
    {
      name: '关闭数量',
      type: 'line',
      stack: 'Total',
      data: []
    }
  ]
};

export default {
  name: 'TesterCharts',
  data() {
    return {
      searchCondition: {
        accountId: '',
        startDate: '',
        endDate: '',
      },
    }
  },
  created() {
  },
  mounted() {
    // 折线图
    const lineChart = echarts.init(this.$refs.dataDiv);
    metricApi.queryCoreMetricData(5)
      .then((response) => {
        const data = response.data;
        const metricNames = data.map(item => item.name)
        // console.log('metricNames', metricNames)

        // 提取所有日期
        const dates = [...new Set(data.flatMap(item => item.data.map(d => d.date)))];

        // 初始化xAxis数据
        option.xAxis.data = dates;

        // 初始化series数据
        option.series = metricNames.map(name => {
          const metricData = data.find(item => item.name === name).data;
          return {
            name: name,
            type: 'line',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
            },
            data: dates.map(date => {
              const item = metricData.find(d => d.date === date);
              return item ? item.data : null;
            })
          };
        });
        // 设置ECharts选项
        lineChart.setOption(option);

        // option.xAxis.data = response.data?.xAxis || []
        // option.series[0].data = response.data?.create?.map((v) => v.value) || []
        // option.series[1].data = response.data?.closed?.map((v) => v.value) || []
        // lineChart.setOption(option)
      })
      .catch((error) => {
        console.error('获取云仓指标折线图数据失败', error)
      })
  },
  methods: {},
}
</script>

<style scoped></style>
